<template>
  <BasicLayout title="支付订单">
    <el-dialog
      slot="content"
      title="选择支付方式"
      width="90%"
      :visible.sync="dialogVisible"
    >
      <div class="pay-wrapper" @click="radio = 1">
        <div class="title">
          <img class="img-pay" src="@/assets/pay/微信支付.png" />
          <span>微信支付</span>
        </div>
        <el-radio class="radio-pay" v-model="radio" :label="1">{{
          ""
        }}</el-radio>
      </div>
      <div class="pay-wrapper" @click="radio = 2">
        <div class="title">
          <img class="img-pay" src="@/assets/pay/支付宝支付.png" />
          <span>支付宝</span>
        </div>
        <el-radio class="radio-pay" v-model="radio" :label="2">{{
          ""
        }}</el-radio>
      </div>
      <div slot="footer">
        <el-button class="btn-pay" type="primary" @click="pay">支付</el-button>
      </div>
    </el-dialog>
  </BasicLayout>
</template>

<script>
import BasicLayout from "@/components/BasicLayout/index.vue";
export default {
  components: {
    BasicLayout,
  },
  methods: {
    pay() {
      const loading = this.$loading({
        lock: true,
        text: "正在付款中",
        spinner: "el-icon-loading",
      });
      setTimeout(() => {
        loading.close();
        this.$router.push({ name: "Comment", query: { type: "person" } });
      }, 1000);
    },
  },
  data() {
    return {
      dialogVisible: true,
      radio: 1,
    };
  },
};
</script>

<style scoped>
.btn-pay {
  width: 100%;
}
.radio-group {
  width: 100%;
}
.pay-wrapper {
  width: 90%;
  margin: 1em 0;
  font-weight: bold;
  font-size: 1.2em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.img-pay {
  width: 40px;
  margin: 0.5em;
}
.title {
  display: flex;
  align-items: center;
}
</style>
